<template>
  <div v-if="bookingDetails" class="details-card">
    <p><strong>订单ID:</strong> {{ bookingDetails.orderId }}</p>
    <p><strong>会议室名称:</strong> {{ bookingDetails.roomName }}</p>
    <p><strong>开始时间:</strong> {{ formatDateTime(bookingDetails.startTime) }}</p>
    <p><strong>结束时间:</strong> {{ formatDateTime(bookingDetails.endTime) }}</p>
    <p><strong>预订用户:</strong> {{ bookingDetails.username }} ({{ bookingDetails.realName }})</p>
    <p><strong>联系电话:</strong> {{ bookingDetails.phone }}</p>
    <p><strong>所属公司:</strong> {{ bookingDetails.company }}</p>
    <p><strong>总金额:</strong> ¥{{ bookingDetails.totalFee }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  bookingDetails: {
    type: Object,
    required: true
  }
});

const formatDateTime = (dateTimeString) => {
  if (!dateTimeString) return '';
  const date = new Date(dateTimeString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  });
};
</script>

<style scoped>
.details-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.details-card p {
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
  color: #555;
}

.details-card p strong {
  color: #333;
  margin-right: 0.5rem;
}
</style>
